<template>
	<t-form-item v-bind="$attrs" :name="$attrs.prop">
		<tiny-render v-if="slots && isFunction(slots)" :template="slots" :params="[model]"></tiny-render>
		<!-- 自定义组件 -->
		<component v-else-if="isCustom && component" :is="component" v-model="model[$attrs.prop]" v-bind="componentProps"
			v-on="componentEvents"></component>
		<!-- 标准组件 -->
		<component v-else :is="`T${component}`" v-model="model[$attrs.prop]" v-bind="componentProps"
			v-on="componentEvents">
			<!-- 下拉选择器 -->
			<template v-if="component === 'Select' && Array.isArray(componentProps.options)">
				<t-option v-for="item in componentProps.options" :key="item.value" :label="item.label"
					:value="item.value"></t-option>
			</template>
			<template v-else-if="component === 'Select' && isFunction(componentProps.options)">
				<t-option v-for="item in componentProps.options()" :key="item.value" :label="item.label"
					:value="item.value"></t-option>
			</template>
		</component>
		<!-- children递归 -->
		<template v-if="Array.isArray(children) && children.length">
			<tiny-form-item v-for="(item, index) in children" :key="index" v-bind="item" />
		</template>
	</t-form-item>
</template>

<script>
import TinyFormItem from './TinyFormItem.vue';
import TinyRender from './TinyRender.vue';

export default {
	name: "TinyFormItem",
	components: {
		TinyFormItem,
		TinyRender
	},
	props: {
		/**
		 * @description 表单项组件
		 * @type {String}
		 * @required true
		 */
		component: {
			type: String,
		},
		/**
		 * @description 是否是自定义组件
		 * @type {Boolean}
		 * @default false
		 */
		isCustom: {
			type: Boolean,
			default: false
		},
		/**
		 * @description 自定义组件属性
		 * @type {Object}
		 * @default () => ({})
		 */
		componentProps: {
			type: Object,
			default: () => ({})
		},
		/**
		 * @description 自定义组件事件
		 * @type {Object}
		 * @default () => ({})
		 */
		componentEvents: {
			type: Object,
			default: () => ({})
		},
		/**
		 * @description 表单数据
		 * @type {Array}
		 * @required true
		 */
		children: {
			type: Array,
			default: () => []
		},
		/**
		 * @description 表单数据
		 * @type {Object}
		 * @default () => ({})
		 */
		model: {
			type: Object,
			default: () => ({})
		},
		/**
		 * @description 表单项数据
		 */
		defaultValue: {
			type: [String, Number, Boolean, Array, Object],
			default: ''
		},
		/**
		 * @description 表单项数据
		 * @type {Object}
		 */
		slots: {
			type: Function,
			default: null
		}
	},
	data() {
		return {

		}
	},
	watch: {
		model: {
			handler: function (val) {
				if(Object.prototype.toString.call(val) === '[object Object]' && !val.hasOwnProperty(this.$attrs.prop) && this.$attrs.prop) {
					this.$set(this.model, this.$attrs.prop, this.defaultValue)
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		/**
		 * @description 判断是否是函数
		 * @param {Function} fn
		 * @returns {Boolean}
		 */
		isFunction(fn) {
			return Object.prototype.toString.call(fn) === '[object Function]';
		},
		reset() {
			if (Object.prototype.toString.call(this.model) === '[object Object]' && this.$attrs.prop) {
				this.$set(this.model, this.$attrs.prop, this.defaultValue)
			}
		}
	}
}
</script>